<template>
  <div class="index-container" style="display: flex; overflow-y: auto">
    <!-- 智能侦测 -->
    <detection style="width: 4.58rem; height: 3.71rem"></detection>

    <!-- 智能侦测--确认 -->
    <detail style="width: 4.41rem; height: 6.5rem" />

    <!-- 事件待处理弹框 -->
    <!-- showPhoto 显示照片 -->
    <warn :showPhoto="true" />
    <warn :showPhoto="false" />

    <!-- 视频通话弹框 -->
    <VideoCall />
  </div>
</template>

<script>
export default {
  name: 'Index'
}
</script>
<script setup>
import ResizeBox from '../business-component/components/detail/ResizeBox.vue'
import { reactive, ref, onMounted } from 'vue'
import detection from '../business-component/modules/intelligent/index'
import detail from '../business-component/modules/intelligent-detail/index.vue'
import warn from '../business-component/modules/intelligent-warn'

import VideoCall from '../business-component/modules/video-call'

const columns = [
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
    align: 'left',
    width: 140
  },
  {
    title: '路段',
    dataIndex: 'road',
    key: 'road',
    align: 'left',
    width: 140,
    ellipsis: true
  },
  {
    title: '桩号',
    dataIndex: 'zh',
    key: 'zh',
    align: 'left'
  },
  {
    title: '调度员',
    dataIndex: 'ddy',
    key: 'ddy',
    align: 'left'
  }
]
const dataSource = new Array(30).fill({
  date: '2022-01-10-12:14',
  road: 'G2京沪高速北京方向',
  zh: 'K100-200',
  ddy: '张军'
})
</script>

<style lang="less">
@import url(../../../src/assets/styles/normalize/large-screen.less);

.table-content {
  height: 100%;
  overflow: hidden;
}

.table {
  width: 600px;
  height: 560px;
  overflow: hidden;
  border: 1px solid #333;
  padding: 10px;
  box-sizing: border-box;

  .title {
    font-size: 16px;
    width: 100%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-family: 'pangmenzhengdaoregular';
  }

  .table-content {
    width: 100%;
    height: 480px !important;
    overflow: hidden;
  }

  .btn-group {
    width: 100%;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;

    .confirm,
    .cancel {
      width: 80px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      color: #686868;
      border: 1px solid #686868;
      border-radius: 3px;
      cursor: pointer;
    }

    .confirm {
      color: #266bf4;
      border: 1px solid #266bf4;
      margin-left: 10px;
    }
  }
}

#test {
  height: 60vh;
  width: 500px;
}

.index-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.index-container > div {
  flex: none !important;
  margin: 5px;
}
</style>
